<template>
    <div class="recommend">
      <div class="recommend-main">
        <div class="item" v-for="(item, index) in items" :key="item.id"
          @click="clickItem(index, item.id)"
        >
          <img :src="item.pic" alt="">
          <h3 class="name">{{item.name}}</h3>
          <div class="action">
            <span class="price">{{item.minPrice | currency}}</span>
            <van-icon name="jia" size="20" class="iconfont" class-prefix="icon"/>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { currency } from 'utils/filters'
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    clickItem (index, id) {
      this.$emit('clickItem', { index, id })
    }
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
.recommend{
  &-top{
    line-height: 40px;
    background-color: #f1f1f1;
    padding-left:10px;
    .title{
      font-weight: 100;
      color:#333;
      font-size: 20px;
    }
  }
  &-main{
    display: flex;
    flex-wrap:wrap;
    .item{
      width: 50%;
      padding:0 10px;
      box-sizing: border-box;
      img{
        width: 80%;
        display: block;
        margin: 0 auto;
      }
      .name{
        font-size: 14px;
        color:#333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .action{
        display: flex;
        color:#f66;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
